/* =========================================================  
   BLOG (ModBlogC) — One-Row Cards, Forum Dark, FULL-WIDTH (FINAL+WIDE TEXT)
   • Full-width list (no max-width constraints)
   • Single column list page, each item = [ fixed thumbnail | flexible text ]
   • Clean separators, cyan titles (1.5rem)
   • Lazy image blur-up + CLS-safe dimensions
   • TEXT COLUMN STRETCHES to the pane edge (no content cap)
   ========================================================= */

.ModBlogC{
  /* Typography + colors */
  --ink:#e8edf4;
  --muted:#9eb1c7;
  --cyan:#00BFFF;

  /* Inset separator */
  --inset:0;              /* edge-to-edge separators for full width */
  --line-rgb:255,255,255;
  --line-h:2px;
  --line-h-hover:3px;

  /* Layout tokens */
  --thumb:320px;          /* thumbnail column width */
  --gap:22px;             /* inner gap in a card */
  --gutter:24px;          /* only used if you switch to 2 columns */
  --content-max:none;     /* ⬅ remove cap so text reaches pane edge */
}

/* Base / neutralize cards */
.ModBlogC, .ModBlogC *{ color:var(--ink); box-sizing:border-box; }
.ModBlogC .bbs-article,
.ModBlogC .bbs-listarticle,
.ModBlogC .bbs-comments,
.ModBlogC .bbs-article .content,
.ModBlogC .bbs-listarticle .content{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* =========================================================
   LIST VIEW — OUTER WRAPPER = FULL WIDTH, SINGLE COLUMN
   ========================================================= */
.ModBlogC .bbs-list,
.ModBlogC .bbs-list-wrap,
.ModBlogC .bbs-listing,
.ModBlogC .blog-main-content{
  display:grid !important;
  grid-template-columns:1fr;     /* full-width single column */
  gap:0;                         /* row spacing handled by separators */
  width:100% !important;
  max-width:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* If pager lives inside the wrapper, make it span full width */
.ModBlogC .blog-main-content .bbs-pager,
.ModBlogC .bbs-list .bbs-pager{ grid-column:1 / -1; }

/* Kill legacy floats/widths on items */
.ModBlogC .bbs-list > .bbs-listarticle,
.ModBlogC .bbs-list-wrap > .bbs-listarticle,
.ModBlogC .bbs-listing > .bbs-listarticle{
  float:none !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
}

/* =========================================================
   LIST ITEM — ONE ROW: [thumb | text]
   ========================================================= */
.ModBlogC .bbs-listarticle{
  position:relative;
  display:grid !important;
  grid-template-columns: var(--thumb) 1fr; /* allow the text column to fully flex */
  align-items:center;
  column-gap:var(--gap);
  padding:18px 18px 22px;
  overflow:visible;
}

/* Place the thumbnail in column 1 (anchor that wraps figure) */
.ModBlogC .bbs-listarticle > a,
.ModBlogC .bbs-listarticle > .thumb{
  grid-column:1;
  grid-row:1 / span 3;        /* spans title + summary/meta visual height */
  display:block;
}

/* Figure / image */
.ModBlogC .bbs-listarticle figure{ margin:0; line-height:0; }
.ModBlogC .bbs-listarticle figure img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:12px;
  border:1px solid #22314c;
  box-shadow:0 4px 18px rgba(0,0,0,.25);
}

/* Keep alignment even if there’s no image */
.ModBlogC .bbs-listarticle a figure:empty{
  display:block; width:100%; aspect-ratio:16/9;
  border-radius:12px; border:1px dashed rgba(255,255,255,.25);
  background:rgba(255,255,255,.04);
}

/* All text goes in column 2 */
.ModBlogC .bbs-listarticle > .supertitle,
.ModBlogC .bbs-listarticle > h2,
.ModBlogC .bbs-listarticle > .content{ grid-column:2; }

/* ✨ Make the entire text side use the full available width */
.ModBlogC .bbs-listarticle > h2,
.ModBlogC .bbs-listarticle > .supertitle,
.ModBlogC .bbs-listarticle .content,
.ModBlogC .bbs-listarticle .content > *,
.ModBlogC .bbs-listarticle .content .summary,
.ModBlogC .bbs-listarticle .content .metadata{
  max-width:none !important;
  width:100% !important;
}

/* Supertitle + Title */
.ModBlogC .bbs-listarticle > .supertitle{
  color:var(--muted); font-size:.9rem; margin:0 0 4px;
}
.ModBlogC .bbs-listarticle > h2{ margin:.1em 0 .35em; line-height:1.2; }
.ModBlogC .bbs-listarticle > h2 a{
  color:var(--cyan) !important;
  font-size:1.5rem !important;
  font-weight:800; letter-spacing:.2px;
  text-decoration:none;
  transition:color .2s ease, text-shadow .2s ease;
}
.ModBlogC .bbs-listarticle:hover > h2 a{
  color:#7fdcff !important;
  text-shadow:0 0 6px rgba(0,191,255,.4);
}
.ModBlogC .bbs-listarticle > h2 a:hover{
  text-decoration:underline; text-underline-offset:2px;
}

/* Summary + content */
.ModBlogC .bbs-listarticle .content{
  display:flex; flex-direction:column; gap:6px;
}
.ModBlogC .bbs-listarticle .content .summary,
.ModBlogC .bbs-listarticle .content .summary p{
  font-size:1.22rem !important;
  line-height:1.5 !important;
  font-weight:400 !important;
  margin:6px 0 6px;
  color:var(--ink);
}

/* Metadata */
.ModBlogC .bbs-listarticle .content .metadata{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px;
  line-height:1.3; margin-top:4px;
  color:var(--muted) !important; font-size:.95rem;
}
.ModBlogC .bbs-listarticle .content .metadata > div{
  display:flex; align-items:center; gap:6px;
  border-right:1px solid rgba(255,255,255,.25);
  padding-right:10px; margin-right:6px;
}
.ModBlogC .bbs-listarticle .content .metadata > div:last-child{
  border-right:none; padding-right:0; margin-right:0;
}
.ModBlogC .bbs-listarticle .content .metadata i{ opacity:.9; }

/* Forum-style white inset separator */
.ModBlogC .bbs-listarticle::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:var(--line-h);
  background:linear-gradient(90deg,
    rgba(var(--line-rgb),0) 0%,
    rgba(var(--line-rgb),.45) 16%,
    rgba(var(--line-rgb),.85) 50%,
    rgba(var(--line-rgb),.45) 84%,
    rgba(var(--line-rgb),0) 100%);
  margin:0 var(--inset); pointer-events:none; transition:height .15s ease;
}
.ModBlogC .bbs-listarticle:hover::after{ height:var(--line-h-hover); }

/* =========================================================
   LAZY IMAGE BLUR-UP (ties into ListImage.html update)
   ========================================================= */
.ModBlogC .thumb-img.blur-up{
  filter: blur(10px);
  opacity:.85;
  transition: filter .35s ease, opacity .35s ease;
  will-change: filter, opacity;
}
.ModBlogC .thumb-img.blur-up.is-loaded{
  filter: blur(0);
  opacity:1;
}

/* =========================================================
   SINGLE ARTICLE VIEW — GRID ALIGNMENT (no left gap)
   ========================================================= */
.ModBlogC .bbs-article .content{
  clear:none !important;
  overflow:visible !important;
  display:grid !important;
  grid-template-columns: 240px minmax(0,1fr); /* meta | body */
  column-gap:32px;
  align-items:start;
}
.ModBlogC .bbs-article .content .metadata{
  float:none !important;
  width:auto !important;
  margin:0 !important;
}
.ModBlogC .bbs-article .content .body{
  grid-column:2;
  width:auto !important;
  overflow:visible !important;
  padding-top:0 !important;
  margin-top:0 !important;
  min-width:0;

  font-size:1.22rem !important;
  line-height:1.5 !important;
  font-weight:400 !important;
  letter-spacing:.2px;
  color:var(--ink);
}
.ModBlogC .bbs-article .content .body > :first-child{ margin-top:0 !important; }
.ModBlogC .bbs-article .content .body h1,
.ModBlogC .bbs-article .content .body h2,
.ModBlogC .bbs-article .content .body h3{
  color:var(--cyan) !important;
  font-weight:800;
  font-size:1.5rem !important;
  line-height:1.2 !important;
}
.ModBlogC .bbs-article .content .body a,
.ModBlogC .bbs-listarticle .content .summary a{
  color:#9ad9ff !important; text-decoration:none;
}
.ModBlogC .bbs-article .content .body a:hover,
.ModBlogC .bbs-listarticle .content .summary a:hover{
  text-decoration:underline; text-underline-offset:2px;
}

/* Article header separator */
.ModBlogC .bbs-article .content .metadata{
  position:relative;
  padding-bottom:14px;
  margin-bottom:16px;
}
.ModBlogC .bbs-article .content .metadata::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:var(--line-h);
  background:linear-gradient(90deg,
    rgba(var(--line-rgb),0) 0%,
    rgba(var(--line-rgb),.45) 16%,
    rgba(var(--line-rgb),.85) 50%,
    rgba(var(--line-rgb),.45) 84%,
    rgba(var(--line-rgb),0) 100%);
  margin:0 var(--inset);
}

/* =========================================================
   COMMENTS
   ========================================================= */
.ModBlogC .bbs-comments{
  position:relative; margin-top:30px; padding-top:10px;
}
.ModBlogC .bbs-comments::before{
  content:""; position:absolute; left:0; right:0; top:0; height:var(--line-h);
  background:linear-gradient(90deg,
    rgba(var(--line-rgb),0) 0%,
    rgba(var(--line-rgb),.45) 16%,
    rgba(var(--line-rgb),.85) 50%,
    rgba(var(--line-rgb),.45) 84%,
    rgba(var(--line-rgb),0) 100%);
  margin:0 var(--inset);
}
.ModBlogC .bbs-comments .comment .author .profile,
.ModBlogC .bbs-comments .totals,
.ModBlogC .bbs-comments .comment .actions{
  color:var(--muted) !important; font-size:.95rem;
}

/* =========================================================
   PAGINATION
   ========================================================= */
.ModBlogC .bbs-pager .bbs-pagination a{
  color:var(--ink);
  border:1px solid rgba(255,255,255,.25);
  background:transparent;
}
.ModBlogC .bbs-pager .bbs-pagination .no-touch a:hover{
  background:rgba(255,255,255,.07);
}
.ModBlogC .bbs-pager .bbs-pagination .current{
  background:#777; border-color:#777; color:#fff;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .ModBlogC .bbs-article .content{ display:block !important; }
  .ModBlogC .bbs-article .content .body{ margin-top:12px !important; }
}
@media (max-width:720px){
  .ModBlogC{ --thumb:240px; --gap:16px; }
  .ModBlogC .bbs-listarticle{ grid-template-columns:1fr; }
  .ModBlogC .bbs-listarticle > a{ grid-row:auto; order:-1; margin-bottom:10px; }
}

/* =========================================================
   OPTIONAL: Switch to two equal list columns on wide screens
   ========================================================= */
/*
@media (min-width:1101px){
  .ModBlogC .bbs-list,
  .ModBlogC .bbs-list-wrap,
  .ModBlogC .bbs-listing,
  .ModBlogC .blog-main-content{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:var(--gutter);
  }
}
*/